<template>
    <div class="modulePromotions">
        <swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" indicator-color="white" indicator-active-color="#ffd11a">
            <swiper-item v-for="(item, index) in dataList" :key="index" class="promotion_body" @click="toPromotionDetail(item.promotion_id)">
                <div class="promotion_img">
                    <img :src="item.icon" alt mode="widthFix" />
                </div>
                <div class="promotion_message">
                    <div class="activity_title">{{ item.title }}</div>
                    <div>—</div>
                    <div class="activity_time">活动时间：{{ item.start_date }}~{{ item.end_date }}</div>
                </div>
            </swiper-item>
        </swiper>
    </div>
</template>
<script>
import { mapGetters, mapState } from 'vuex'
export default {
	name: 'module-promotions',
	components: {},
	props: {
		dataList: {
			type: Array,
			default: () => {
				return []
			}
		}
	},
	data() {
		return {}
	},
	mounted() {},
	methods: {
		// 跳转到促销活动详情
		toPromotionDetail(id) {
			let returnUrl = `/company/promotion/detail${this.commonJS.queryData({
				owner_user_id: this.userInfo.user_id,
				promotion_id: id
			})}`
			console.log(id)
			uni.navigateTo({
				// url: `/pages/page/webview/index?user_id=${this.userInfo.user_id}&returnUrl=${encodeURIComponent(`${this.$constant.formal}/hkds/#${returnUrl}`)}`
				url: `/pages/pagesHome/promotion/detail${this.commonJS.queryData({
				    owner_user_id: this.userInfo.user_id,
				    promotion_id: id
				})}`
			})
		}
	},
	computed: {
		...mapGetters({ userInfo: 'getBasicUser' })
	}
}
</script>

<style lang="scss" scoped>

.modulePromotions {
    // 促销活动
    // .promotions_wrap {
    //     .module_wrap_body {
    //         padding: 40px 0 0;
    //     }
    .swiper {
        height: 220px;
    }

    .van-swipe {
        // padding-bottom: 22px;
        .van-swipe__indicators {
            // bottom: 0;
            .van-swipe__indicator {
                background-color: #ccc;
            }
            .van-swipe__indicator--active {
                width: 20px;
                height: 10px;
                background-color: $mainColor !important;
            }
        }
    }

    .promotion_body {
        position: relative;
        width: 100%;
        // height: 222px;
        border-radius: 20px;
        .promotion_img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            width: calc(100% - 12px);
            margin: 0 6px;
            img {
                width: 100%;
                height: 100%;
                border-radius: 20px;
            }
        }
        .promotion_message {
            position: absolute;
            top: 0;
            left: 0;
            color: #fff;
            padding: 40px 0 0 30px;
            font-size: 36px;
            .activity_time {
                font-size: 24px;
                margin-top: 10px;
            }
            .activity_title {
                font-weight: bold;
                font-size: 32px;
                margin-bottom: 12px;
            }
        }
    }
    // }
}
</style>
